<template>
  <div class="login">
    <div class="inner">
      <p>新用户注册</p>
      <p>很高兴您成为商城的会员</p>

      <my-input
        v-model="mobile"
        placeholder="请输入手机号码"
        type="text"
        @blur="mobileBlur"
        :class="mobileTrue"
      >
        <template #text>
          <span v-show="mobileTrue == 'error'">必填</span>
        </template>
        <template #icon>
          <van-icon name="phone-o" />
        </template>
      </my-input>
      <!-- 手机号码 -->
      <my-input
        v-model="pass"
        placeholder="请输入密码"
        :type="isPassOpen ? 'text' : 'password'"
        @blur="passBlur"
        :class="passTrue"
      >
        <template #text>
          <span v-show="passTrue == 'error'">必填</span>
        </template>
        <template #icon>
          <van-icon
            :name="isPassOpen ? 'eye-o' : 'closed-eye'"
            @click="isPassOpen = !isPassOpen"
          />
        </template>
      </my-input>
      <!-- 密码 -->
      <my-input
        v-model="mkPass"
        placeholder="请再次输入密码"
        :type="ismkPassOpen ? 'text' : 'password'"
        @blur="mkpassBlur"
        :class="mkpassTrue"
      >
        <template #text>
          <span v-show="mkpassTrue == 'error'">必填</span>
        </template>
        <template #icon>
          <van-icon
            :name="ismkPassOpen ? 'eye-o' : 'closed-eye'"
            @click="ismkPassOpen = !ismkPassOpen"
          />
        </template>
      </my-input>
      <!-- 确认密码 -->
      <my-input
        v-model="name"
        placeholder="请输入用户名"
        type="text"
        :class="nameTrue"
        @blur="nameBlur"
      >
        <template #text>
          <span v-show="nameTrue == 'error'">必填</span>
        </template>
        <template #icon>
          <van-icon name="friends-o" />
        </template>
      </my-input>
      <!-- 用户名 -->

      <my-input v-model="picCode">
        <template #img>
          <img :src="imgSrc" alt="" @click="changeImg" />
        </template>
      </my-input>
      <!-- 图形验证码 -->

      <my-input v-model="area" @click="show = true"></my-input>
      <!-- 省市选择器 -->

      <my-input v-model="smsValue">
        <template #button>
          <div @click="getSmsEvent" v-if="smsTime <= 0 || smsTime == 60">
            获取验证码
          </div>
          <div v-else>{{ smsTime }}后再试</div>
        </template>
      </my-input>

      <p class="center" @click="registerEvent">
        <span class="center">立即注册</span>
      </p>

      <p>忘记密码</p>
      <p @click="$router.push('/login')">已有账号 立即登录</p>
    </div>

    <van-popup v-model:show="show" position="bottom">
      <van-area
        title="标题"
        :area-list="areaList"
        @confirm="confirm"
        @cancel="show = false"
        :columns-num="2"
      />
    </van-popup>
    <!-- 这个弹出框 放我们的省市选择器 -->
  </div>
</template>
<script>
import myInput from "../../components/myInput.vue";
import { reactive, toRefs, ref } from "vue";
import { useRouter } from "vue-router";

import { areaList } from "@vant/area-data";
//引入省市区的数据 用的是vant默认的数据 要先安装

import { getSms, register } from "../../utils/person.js";
//获取短信验证码
export default {
  components: {
    myInput,
  },
  setup(props) {
    const data = reactive({
      mobile: "",
      //手机号码
      pass: "",
      //密码
      mkPass: "",
      //确认密码
      name: "",
      //昵称

      mobileTrue: "",
      passTrue: "",
      mkpassTrue: "",
      nameTrue: "",
      // 判断四个字断 是不是正确

      isPassOpen: false,
      //密码框的眼镜是不是张开的
      ismkPassOpen: false,
      //确认密码框的眼镜是不是张开的

      imgSrc: "",
      // 图形验证码的路径
      show: false,
      //控制弹框显示隐藏的

      area: "",
      //地区选择的v-model
      picCode: "",
      // 用户输入的图形验证码
      picKey: "",
      //保存生成图形验证码时候的时间戳
      smsValue: "",
      //用户输入的短信验证码
      smsTime: 60,
      //短信验证码的倒计时
      city: "",
      //保存省市区的数据为了注册做准备
    });

    let regMobile = /^1[3,5,6,7,8,9][0-9]{9}$/;
    // 电话号码的正则
    let regName = /^[0-9a-z_A_Z]{6,12}$/;
    //昵称的正则
    const mobileBlur = () =>
      (data.mobileTrue = regMobile.test(data.mobile) ? "success" : "error");
    //失焦的时候判断电话号码对不对

    const passBlur = () =>
      (data.passTrue = data.pass != "" ? "success" : "error");
    //判断密码是否为空

    const mkpassBlur = () =>
      (data.mkpassTrue = data.pass == data.mkPass ? "success" : "error");
    //确认密码 如果跟密码一样就是success否则就是error

    const nameBlur = () =>
      (data.nameTrue = regName.test(data.name) ? "success" : "error");
    //对用户名的判断

    const changeImg = () => {
      data.picKey = new Date().getTime();
      data.imgSrc =
        "https://api.it120.cc/small4/verification/pic/get?key=" + data.picKey;
      // 获取随机的图形验证码 接口加上一个时间戳 然后给图片的src就会生成图形验证码
    };
    changeImg();
    //进入页面执行一下changeImg方法 一进页面就有一个图形验证码

    const confirm = (val) => {
      console.log(val);
      // 点击确定就会拿到选中的省市
      data.area = [val[0].name, val[1].name].join(" ");
      //把拿到的选中的地区拼成一个字符串
      data.city = val;
      //保存省市区的数据为了注册做准备
      data.show = false;
    };
    //点击省市区的选择 拿到选中的地址 并且展示在input中

    const getSmsEvent = () => {
      getSms({
        mobile: data.mobile,
        key: data.picKey,
        picCode: data.picCode,
      }).then((res) => {
        console.log(res);
      });
      //把手机号码 时间戳 图形验证码 传到后台后台判断成功后会给我们返回数据
      let timer = null;
      timer = setInterval(() => {
        data.smsTime--;
        if (data.smsTime <= 0) {
          clearInterval(timer);
        }
      }, 1000);
      //计时器实现倒计时 如果到0 就清空计时器 并且出现再次点击的按钮
    };
    //获取短信验证码

    const registerEvent = () => {
      register({
        mobile: data.mobile,
        pass: data.pass,
        name: data.name,
        code: data.smsValue,
        province: data.city[0].name,
        city: data.city[1].name,
      }).then((res) => {
        console.log(res);
        router.push("/login");
        // 注册成功就可以跳转到登陆页面登录了
      });
    };
    return {
      ...toRefs(data),
      mobileBlur,
      passBlur,
      mkpassBlur,
      nameBlur,
      changeImg,
      areaList,
      confirm,
      getSmsEvent,
      registerEvent,
    };
  },
};
</script>
<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
  .inner {
    border: 1px solid #f5f5f5;
    padding: 30px;
    box-sizing: border-box;
    height: 580px;
    p:nth-child(1) {
      color: #666;
      font-size: 22px;
    }
    p:nth-child(2) {
      color: #909090;
      font-size: 15px;
      margin-top: 26px;
    }
    p:nth-last-child(2) {
      color: #989898;
      font-size: 12px;
      margin-top: 26px;
      text-align: center;
    }
    p:nth-last-child(1) {
      color: #549ff9;
      font-size: 15px;
      margin-top: 26px;
      text-align: center;
    }

    p:nth-last-child(3) {
      margin-top: 22px;
      span {
        width: 210px;
        height: 50px;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
      }
    }
  }
}
</style>
